<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <div class="wrapper">
        <ul class="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="fluffy.html" target="_blank">fluffy</a></li>
            <li><a href="socks.html">Socks</a></li>
            <li><a href="whiskers.html">whiskers</a></li>
        </ul>
        <p class="content">Welcome to Kittens! Home of Fluffy, Socks, and Whiskers. If you're not suffering from a cute overdose within the hour, then you really are a heartless bugger! Now lets look at some cats!</p>
        <div class="media">
            <img class="photo" src="http://www.ichong123.com/uploads/2014/08/m1.jpg" alt="Fluffy!">
        </div>
    </div>
    <script>
        const list = document.querySelector('.nav');
        list.addEventListener('click',function(event){
            event.preventDefault();
            // console.log(event.target);
            if(event.target.nodeName=='A'){
                const url = event.target.href;
                // console.log(url);

                // react-router-dom ajax 动态获取内容
                // 把其他页面的内容拿到，DHTML 动态加载到当前页面上
                // routers/index.js switch route
                const xhr=new XMLHttpRequest();
                xhr.open('GET',url,true);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4){
                        // text/html
                        // console.log(xhr.responseText);
                        const html=xhr.responseText;
                        const contentMatches=html.match(/<p class="content">(.+)<\/p>/);
                        // console.log(contentMatches);
                        const content=contentMatches[1];
                        const photo=html.match(/<img class="photo" src="(.+)" alt="(.+)">/)[1];
                        const title=html.match(/<title>(.+)<\/title>/)[1];
                        // console.log(imgurl);
                        let state={
                            content,
                            photo,
                            title
                        }
                        // console.log(state);
                        document.querySelector('.content').innerHTML=content;
                        document.querySelector('.photo').src=photo;
                        document.title=title;
                        history.pushState(state,state.title,url);
                    }
                }
                xhr.send()
            }
        },false)
    </script>
</body>
</html>